<template>
  <div>
    <a-modal
      :visible="visible"
      title="分配护士"
      :footer="null"
      width="70%"
      @cancel="cancle"
    >
      <!-- 头部 -->
      <a-form
        ref="formRef"
        :rules="rules"
        :model="form"
        :hideRequiredMark="true"
      >
        <a-row>
          <a-col :span="8" :offset="1">
            <a-form-item name="护士ID" label="护士ID">
              <a-input
                v-model:value="form.nurseId"
                allow-clear
                placeholder="请输入护士ID"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" :offset="1">
            <a-form-item label="姓名">
              <a-input
                allow-clear
                v-model:value="form.nurseName"
                placeholder="请输入护士姓名"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" :offset="1">
            <a-form-item label="手机号">
              <a-input
                v-model:value="form.mobile"
                placeholder="请输入护士手机号"
                allow-clear
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" :offset="1">
            <a-form-item label="地理位置">
              <a-input
                allow-clear
                v-model:value="form.address"
                placeholder="请输入地理位置"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-button type="primary" @click="search">搜索</a-button></a-col
          >
        </a-row>
      </a-form>

      <!-- 列表 -->
      <a-table
        :columns="columns"
        :data-source="list"
        bordered
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        @resizeColumn="handleResizeColumn"
      >
        <template #img="{ record }">
          <img :src="record.img" alt="" class="img" />
        </template>
        <template #operation="{ record }">
          <a-button type="link" @click="divide(record.nurseId, record.name)"
            >分配</a-button
          >
        </template>
        <template #identity="{ record }">
          <div>{{ nurseType[record.identity] }}</div>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
  toRefs,
  onMounted,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { selectAllOkNurse, riderOrder } from "@/api/order/index.js";
import { deleteObjBlank } from "@/assets/js/common.js";
import { nurseType } from "@/utils/dict.js";
import { useModal } from "@/hooks"
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    number: {
      type: String,
      default: "",
    },
    offline: {
      type: Boolean,
      default: false,
    },
    option: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const data = reactive({
      nurseType,
      formRef: "",
      form: {},
      loading: true,
      list: [],
    });
    const rules = {
      keyword: [
        { required: true, message: "请输入搜索内容!", trigger: "blur" },
      ],
    };
    const router = useRouter();
    const route = useRoute();

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    const showModal = () => {
      data.visible = true;
    };

    const handleOk = (e) => {
      console.log(e);
      data.visible = false;
    };

    // 查询
    const search = () => {
      page.current = 1;
      deleteObjBlank(data.form);
      init();
      // console.log(data.form, "表单内容");
      // data.formRef
      //   .validate()
      //   .then(() => {
      //     init();
      //   })
      //   .catch((error) => {
      //     console.log("error", error);
      //   });
    };

    const columns = [
      {
        title: "护士ID",
        dataIndex: "nurseId",
        className: "table",
        align: "center",
      },
      {
        title: "护士姓名",
        dataIndex: "name",
        className: "table",
        align: "center",
      },
      {
        title: "手机号",
        dataIndex: "mobile",
        className: "table",
        align: "center",
      },
      {
        title: "地理位置",
        dataIndex: "address",
        className: "table",
        align: "center",
        resizable: true,
        width: 150,
        ellipsis: true,
      },
      {
        title: "距离(KM)",
        dataIndex: "orderDistance",
        className: "table",
        align: "center",
        resizable: true,
      },
      {
        title: "注册日期",
        dataIndex: "createdAt",
        className: "table",
        align: "center",
        sorter: (a, b) => {
          const aTime = new Date(a.createdAt).getTime();
          const bTime = new Date(b.createdAt).getTime();
          return aTime - bTime;
        },
      },
      {
        title: "接单数量",
        dataIndex: "orderNumber",
        className: "table",
        align: "center",
        sorter: (a, b) => {
          return b - a;
        },
      },
      {
        title: "注册渠道",
        dataIndex: "registsource",
        className: "table",
        align: "center",
      },
      {
        title: "职称",
        dataIndex: "identity",
        className: "table",
        align: "center",
        slots: {
          customRender: "identity",
        },
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;
      init();
    };
    const cancle = () => {
      emit("closeModal");
    };
    // 处理
    const divide = (key, name) => {
      const {closeModal} = useModal.confirm({
        title: () => `确定将改订单分配给${name}吗?`,
        icon: () => createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          console.log("123")
          // 线下订单的分配护士
          if (props.offline) {
            emit("divideNurse", key);
          } else {
            let res = await riderOrder(props.number, key);
            if (res.success) {
              cancle();
              emit("success"); //分配成功了
              closeModal()
            } else {
              message.error("分配失败了！！！");
            }
          }
        },
        
      });
    };
    init();
    async function init() {
      data.loading = true;
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...data.form,
        number: props.number,
      };
      if (props.option == "offOrder") {
        obj.offOrder = 1;
      }
      console.log(obj, "obj");
      let res = await selectAllOkNurse(obj);
      if (res.success) {
        res.object.list.map((el) => (el.key = el.nurseId));
        data.list = res.object.list;
        page.total = res.object.total;
        data.loading = false;
      } else {
        data.loading = false;
      }
    }
    onMounted(() => {});
    return {
      ...toRefs(data),
      rules,
      columns,
      pagination,
      handleTableChange,
      search,
      divide,
      showModal,
      handleOk,
      cancle,
      handleResizeColumn: (w, col) => {
        col.width = w;
      },
    };
  },
};
</script>
<style scoped lang="less">
.img {
  width: 50px;
  height: 50px;
}
.title {
  font-weight: bold;
}
.ant-row {
  margin-bottom: 20px;
}
</style>
